<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="../../layui/css/layui.css">
  <style>

    html,body{
      width: 100%;
      height: 100%;
    }

    body {
      background-color: #009587;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    .layui-windows-desk {
      position: absolute;
      left: 40px;
      bottom: 40px;
      width: 320px;
      height: 400px;
      z-index: 99999999;
      background-color: rgba(0,0,0, .8);
    }
  </style>
</head>

<body id="layui-main">
  <div class = "layui-windows-desk"></div>
  <script src="../../layui/layui.js"></script>
  <script>
    var Tile;
    layui.extend({
      tile: "../../layui_exts/tile",
    }).use(['tile'], function () {
      let container = $(`<div class = "layui-layer-tiles layui-windows-desk-scroll"></div>`);
      $('.layui-windows-desk').append(container);
      let data = [{
        id: 1,
        name: 'layui',
        source: [
          {
            id: 'test',
            name: '测试',
            x: 0,
            y: 0,
            w: 1,
            h: 1,
            color: '#1E9FFF',
          },
          {
            id: 'layui',
            name: 'layui官网',
            x: 1,
            y: 0,
            w: 2,
            h: 2,
            img: './image/icon-1.png',
            cb: function(){
              window.open('https://gitee.com/layui/layui','_target')
            },
          },
          {
            id: 'Layuivue',
            name: '测试',
            x: 0,
            y: 1,
            w: 1,
            h: 1,
            color: '#FFFFFF',
            img: './image/logo-png.a3bc5caf.png',
            cb: function(){
              window.open('http://www.layui-vue.com/zh-CN/index','_target')
            },
          },
        ],
      }, {
        id: 2,
        name: 'Win10 UI',
        source: [
          {
            id: 'Win10 UI',
            name: '4',
            x: 0,
            y: 0,
            w: 1,
            h: 1,
            img: './image/win10.png',
            cb: function(){
              window.open('https://win10ui.yuri2.cn/src/demo.html','_target')
            },
          },
          {
            id: 'Win10 UI docs',
            name: '文档',
            x: 1,
            y: 0,
            w: 2,
            h: 1,
            cb: function(){
              window.open('https://github.com/yuri2peter/ylui/tree/master/documentsl','_target')
            },
          },
          {
            id: 'tips',
            name: '提示',
            x: 1,
            y: 1,
            w: 2,
            h: 1,
            color: '#5FB878',
            cb: function (id) { alert('这个的id是:' + id) }
          }
        ],
      }];
      Tile = layui.tile(container, { data: data });
      // Tile.setAnimate(['flip', 'bounceIn', 'flash', 'pulse', 'rubberBand', 'shake', 'headShake', 'swing'], 0.5);
      Tile.setAnimate(['flip', 'bounceIn'], 0.5);
    });
  </script>
</body>

</html>